<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-friend"></i> 用户管理 / 用户列表
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-input v-model="query.search" placeholder="用户手机号" class="handle-input mr10"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch" style="height: 40px">搜索</el-button>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="id" label="UID" width="55" align="center"></el-table-column>
				<el-table-column prop="tel" label="手机号" align="center"></el-table-column>
				<el-table-column prop="wx_openid" label="绑定微信" width="150" align="center">
					<template #default="scope">
						<el-tag :type="scope.row.wx_openid ? 'success' : 'info'">{{ scope.row.wx_openid ? '已绑定' : '未绑定' }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="alipay_user_id" label="绑定支付宝" width="150" align="center">
					<template #default="scope">
						<el-tag :type="scope.row.alipay_user_id ? 'success' : 'info'">{{ scope.row.alipay_user_id ? '已绑定' : '未绑定' }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="状态" align="center" width="120">
					<template #default="scope">
						<el-tag :type="scope.row.status === 1 ? 'success' : scope.row.status === 2 ? 'danger' : ''
                            ">{{ scope.row.status === 1 ? '正常' : '已拉黑' }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="180" align="center">
					<template #default="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
						<el-button type="text" v-if="scope.row.status === 1" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">拉黑</el-button>
						<el-button type="text" v-if="scope.row.status === 2" icon="el-icon-lx-forwardfill" @click="unBlock(scope.$index, scope.row)">恢复</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination  hide-on-single-page background layout="total, prev, pager, next" :current-page="query.pageIndex" :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>
		<el-dialog  title="用户信息" v-model="editVisible" width="60%" custom-class="dialog-page">
			<el-form :model="formData" label-width="100px" ref="form">
				<el-form-item prop="tel" label="用户手机号">
					<el-input v-model="formData.tel" maxlength="30" show-word-limit readonly></el-input>
				</el-form-item>
				<el-form-item label="微信">
					<div class="userinfo" v-show="formData.wx_openid">
						<div class="avatar" :style="'background-image: url(\''+ formData.wx_info.avatar+'\')'"></div>
						<div class="nickname">{{formData.wx_info.nickname}}</div>
					</div>
				</el-form-item>
				<el-form-item label="支付宝">
					<div class="userinfo" v-show="formData.alipay_user_id">
						<div class="avatar" :style="'background-image: url(\''+ formData.ali_info.avatar+'\')'"></div>
						<div class="nickname">{{formData.ali_info.nick_name}}</div>
					</div>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-radio-group v-model="formData.status">
						<el-radio label="1">正常</el-radio>
						<el-radio label="2">已拉黑</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<template #footer>
                <span class="dialog-footer">
                    <el-button @click="editVisible=false">取 消</el-button>
                </span>
			</template>
		</el-dialog>
	</div>
</template>
<script>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {getUserList, getUserDetail, userBlock} from "../../api/api";
import Methods from "../../utils/Methods";
export default {
	name: "userlist",
	components: {  },
	setup() {
		const query = reactive({
			search: "",
			pageIndex: 1,
			pageSize: 10,
		})
		const tableData = ref([])
		const pageTotal = ref(0)
		const editVisible = ref(false);
		const formData = reactive({
			tel: "",
			wx_openid: "",
			alipay_user_id: "",
			status: 1,
			wx_info: {},
			ali_info:{}
		})
		const getData = () => {
			getUserList(query).then(res => {
				tableData.value = res.data.list
				pageTotal.value = res.data.count
			}).catch(err => {
				console.log(err,'----errr')
			})
		}
		getData()
		// 查询操作, 分页导航
		const handleSearch = () => {
			query.pageIndex = 1;getData();
		};
		const handlePageChange = (val) => {
			query.pageIndex = val;getData();
		};
		// 删除操作
		const handleDelete = (index) => {
			ElMessageBox.confirm("确定要拉黑吗？", "提示", {
				type: "warning",
			}).then(() => {
				let data = {
					id: tableData.value[index].id,
					token: Methods.getLocalStorage('admin_token')
				}
				return userBlock(data)
			}).then(res => {
				ElMessage.success("已拉黑")
				tableData.value[index].status = 2
			}).catch(err => {
				console.log(err,'----delete err')
			})
		}
		//恢复操作
		const unBlock = (index) => {
			ElMessageBox.confirm("确定要恢复吗？", "提示", {
				type: "warning",
			}).then(() => {
				let data = {
					id: tableData.value[index].id,
					token: Methods.getLocalStorage('admin_token')
				}
				return userBlock(data)
			}).then(res => {
				ElMessage.success("已恢复")
				tableData.value[index].status = 1
			}).catch(err => {
				console.log(err,'----unblock err')
			})
		}

		const handleEdit = (index,row) => {
			editVisible.value = true
			let query = {
				id: row.id,
				token: Methods.getLocalStorage('admin_token')
			}
			getUserDetail(query).then(res => {
				formData.tel = res.data.tel
				formData.alipay_user_id = res.data.alipay_user_id
				formData.status = res.data.status.toString()
				formData.wx_openid = res.data.wx_openid
				if(res.data.wx_openid) {
					formData.wx_info = res.data.wx_info
				}
				formData.alipay_user_id = res.data.alipay_user_id
				if(res.data.alipay_user_id) {
					formData.ali_info = res.data.ali_info
				}
			}).catch(err => {console.log(err)})
		}

		return {
			query,
			tableData,
			pageTotal,
			editVisible,
			formData,
			handleSearch,
			handlePageChange,
			handleDelete,
			unBlock,
			handleEdit
		}
	}
};
</script>

<style scoped lang="scss">
.handle-box {
	margin-bottom: 5px;
	display: flex;
	flex-wrap: wrap;
}
.handle-select {
	width: 150px;
	margin-bottom: 15px;
}
.handle-input {
	width: 300px;
	margin-bottom: 15px;
}
.table {
	width: 100%;
	font-size: 14px;
	.cover {
		width: 140px;
		height: 80px;
		background-position: center center;
		background-size: cover;
	}
}
.red {
	color: #ff0000;
}
.mr10 {
	margin-right: 10px;
}
::v-deep(.dialog-page) {
	max-width: 1200px;
	min-width: 800px;
}
.userinfo {
	display: flex;
	align-items: center;
	.avatar {
		width: 80px;height: 80px;
		background-position: center center;
		background-size: cover;
		border-radius: 5px;
		margin-right: 15px;
	}
}

</style>
